<template>
  <div id='tmpl'>
        <!--先实现静态的评论页面-->
        <!--提交评论-->
        <div id="pushCom">
            <h3>提交评论:</h3>
            <textarea placeholder="请输入您要评论的内容" v-model="textCom"></textarea>
            <mt-button type="primary" size="large" @click="postComment">提交</mt-button>
        </div>
        <div id="comment">
            <div class="title">
                <h3>评论列表:</h3>
                <p></p>
            </div>
            <div class="commentlist" v-for="(item,index) in list " :key="index">
                <p class="comMess"><span class="lou">{{index+1}}楼</span>  <span>{{item.user_name}}</span> <span class="timer">{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span></p>
                <p class="comMents" v-text="item.content"></p>
            </div>
            <mt-button type="danger" size="large" @click="moreCom">加载跟多</mt-button>
        </div>
  </div>
</template>
<script>
import { Toast } from 'mint-ui';
import common from '../../kikt/comment.js'
export default {
  data () {
    return {
        list:[],
        id:0,
        pageindex:1,
        textCom:''
    };
  },
  created(){
    this.id = this.$route.params.id;
    this.getComments()
  },
  methods: {
    getComments:function(pageindex){
        pageindex = pageindex || 1;
        var url = common.apidomain + "/api/getcomments/"+this.id+"?pageindex="+pageindex;
        this.$http.get(url).then(function(response){
            var data = response.body;
            if(data.status != 0){
                Toast(data.message);
                return;
            }
            //this.list = data.message
            this.list = this.list.concat(data.message)
        })
    },
    postComment:function(){

        var url = common.apidomain + '/api/postcomment/'+this.id;
        this.$http.post(url,{content:this.textCom},{emulateJSON: true}).then(function(response){
            Toast(response.body.message);
           
            this.list = [{
                user_name: "匿名用户",
                add_time: new Date(),
                content: this.textCom
            }].concat(this.list)  //concat 合并两个数组成为新数组

             this.textCom = '';
        })
    },
    moreCom:function(){
            this.pageindex++;
            this.getComments(this.pageindex);
    }
  }
}
</script>
<style lang="css" scoped>
    #pushCom {
        margin-top: 10px;
        padding: 5px;
    }
    #pushCom h3 {
        color: yellowgreen;
        padding-bottom: 5px;
    }
    #pushCom textarea {
        font-size: 14px;
        padding-left: 5px;
        margin-bottom: 8px;
    }
   #comment {
        padding: 5px;
    }
    #comment .title h3{
        color: orange;
        margin-bottom: 5px;
    }
     #comment .title p {
         width: 100%;
         height: 1px;
         border-bottom: 2px solid #ccc;
     }
    
     .commentlist .comMess{
        color: rgba(0,0,0,0.4);
        width: 100%;
        font-size: 15px;
     }
     .commentlist .comMents {
         color: #007ACC;
        
     }
     .timer {
        margin-right: 10px;
        float: right;
     }
     .lou {
         padding-right: 10px;
     }
</style>